<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <!-- <el-input
        v-model="listQuery.goodsSn"
        clearable
        class="filter-item"
        style="width: 160px;"
        placeholder="请输入商品编号"
      /> -->
      <el-input
        v-model="listQuery.name"
        clearable
        class="filter-item"
        style="width: 160px;"
        placeholder="请输入商品名称"
      />
      <el-input
        v-model="listQuery.isbn"
        clearable
        class="filter-item"
        style="width: 160px;"
        placeholder="请输入商品ISBN码"
      />
      <el-input
        v-model="listQuery.author"
        clearable
        class="filter-item"
        style="width: 160px;"
        placeholder="请输入作者"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >查找</el-button
      >
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
        >添加</el-button
      >
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="table-expand">
            <el-form-item label="商品编号">
              <span>{{ props.row.goodsSn }}</span>
            </el-form-item>
            <el-form-item label="宣传画廊">
              <img
                v-for="pic in props.row.gallery"
                :key="pic"
                :src="pic"
                class="gallery"
              />
            </el-form-item>
            <el-form-item label="商品介绍">
              <span>{{ props.row.brief }}</span>
            </el-form-item>
            <el-form-item label="商品单位">
              <span>{{ props.row.unit }}</span>
            </el-form-item>
            <el-form-item label="关键字">
              <span>{{ props.row.keywords }}</span>
            </el-form-item>
            <el-form-item label="类目ID">
              <span>{{ props.row.categoryId }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column align="center" label="商品编号" prop="goodsSn" />

      <el-table-column
        align="center"
        min-width="100"
        label="名称"
        prop="name"
      />

      <el-table-column align="center" property="iconUrl" label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.picUrl" width="40" />
        </template>
      </el-table-column>

      <el-table-column align="center" label="ISBN码" prop="isbn" />

      <el-table-column align="center" label="作者" prop="author" />

      <el-table-column align="center" label="市场售价" prop="counterPrice" />

      <el-table-column align="center" label="当前价格" prop="retailPrice" />

      <el-table-column align="center" label="是否新品" prop="isNew">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isNew ? 'success' : 'error'">{{
            scope.row.isNew ? "新品" : "非新品"
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="是否热品" prop="isHot">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isHot ? 'success' : 'error'">{{
            scope.row.isHot ? "热品" : "非热品"
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="是否在售" prop="isOnSale">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isOnSale ? 'success' : 'error'">{{
            scope.row.isOnSale ? "在售" : "未售"
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="详情" prop="detail">
        <template slot-scope="scope">
          <el-dialog :visible.sync="detailDialogVisible" title="商品详情">
            <div class="goods-detail-box" v-html="goodsDetail" />
          </el-dialog>
          <el-button
            type="primary"
            size="mini"
            @click="showDetail(scope.row.detail)"
            >查看</el-button
          >
        </template>
      </el-table-column>

      <el-table-column align="center" label="规格/库存" prop="detail">
        <template slot-scope="scope">
          <el-dialog
            :visible.sync="detailStandardVisible"
            title="规格/库存详情"
          >
            <el-card class="box-card">
              <h3>商品规格</h3>
              <el-table :data="specifications">
                <el-table-column property="name" label="规格名" />
                <el-table-column property="value" label="规格值">
                  <template slot-scope="scope">
                    <el-tag type="primary">{{ scope.row.value }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column property="picUrl" label="规格图片">
                  <template slot-scope="scope">
                    <img
                      v-if="scope.row.picUrl"
                      :src="scope.row.picUrl"
                      width="40"
                    />
                  </template>
                </el-table-column>
              </el-table>
            </el-card>

            <el-card class="box-card">
              <h3>商品库存</h3>
              <el-table :data="products">
                <el-table-column property="value" label="货品规格">
                  <template slot-scope="scope">
                    <el-tag
                      v-for="tag in scope.row.specifications"
                      :key="tag"
                      >{{ tag }}</el-tag
                    >
                  </template>
                </el-table-column>
                <el-table-column property="price" label="货品售价" />
                <el-table-column property="stock" label="货品数量" />
                <el-table-column property="url" label="货品图片">
                  <template slot-scope="scope">
                    <img v-if="scope.row.url" :src="scope.row.url" width="40" />
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-dialog>
          <el-button
            type="primary"
            size="mini"
            @click="showStandard(scope.row.id)"
            >查看</el-button
          >
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-popover placement="top" width="160">
            <p>确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button
                type="danger"
                size="mini"
                @click="handleDelete(scope.row.id)"
                >确定</el-button
              >
            </div>
            <el-button slot="reference">删除</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-tooltip placement="top" content="返回顶部">
      <back-to-top :visibility-height="100" />
    </el-tooltip>
  </div>
</template>

<style>
.el-card {
  margin-bottom: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.input-new-keyword {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.gallery {
  width: 80px;
  margin-right: 10px;
}
.goods-detail-box img {
  width: 100%;
}
</style>

<script>
import { listGoods, deleteGoods, goodsStandard } from "@/api/goods";
import BackToTop from "@/components/BackToTop";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
  name: "GoodsList",
  components: { BackToTop, Pagination },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 5,
        goodsSn: undefined,
        name: undefined,
        isbn: undefined,
        author: undefined,
        orderBy: "add_time",
        sort: "desc"
      },
      goodsDetail: "",
      detailDialogVisible: false,
      downloadLoading: false,
      detailStandardVisible: false,
      products: [
        {
          id: 0,
          specifications: ["标准"],
          price: 10.0,
          number: 10,
          url:
            "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
        }
      ],
      specifications: [
        {
          specification: "规格1",
          value: "007",
          picUrl:
            "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
        }
      ],
      productForm: {
        id: 0,
        specifications: [],
        price: 0.0,
        number: 0,
        url: ""
      }
    };
  },
  computed: {
    headers() {
      return {
        "X-Litemall-Admin-Token": getToken()
      };
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      listGoods(this.listQuery)
        .then(response => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleCreate() {
      this.$router.push({ path: "/mall/create" });
    },
    handleUpdate(row) {
      this.$router.push({ path: "/mall/edit", query: { id: row.id } });
    },
    showDetail(detail) {
      this.goodsDetail = detail;
      this.detailDialogVisible = true;
    },
    showStandard(id) {
      // todo 发送请求
      // debugger
      goodsStandard({ id }).then(response => {
        const data = response.data.data;
        this.specifications = data.specifications;
        this.products = data.productForm;
      });
      this.detailStandardVisible = true;
    },
    handleDelete(id) {
      deleteGoods({ id })
        .then(response => {
          this.$notify.success({
            title: "成功",
            message: "删除成功"
          });
          const index = this.list.indexOf({ id });
          this.list.splice(index, 1);
        })
        .catch(response => {
          this.$notify.error({
            title: "失败",
            message: response.data.errmsg
          });
        });
      this.$router.push({ path: "/mall/list" });
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [
          "商品ID",
          "商品编号",
          "名称",
          "专柜价格",
          "当前价格",
          "是否新品",
          "是否热品",
          "是否在售",
          "首页主图",
          "宣传图片列表",
          "商品介绍",
          "详细介绍",
          "商品图片",
          "商品单位",
          "关键字",
          "类目ID",
          "品牌商ID"
        ];
        const filterVal = [
          "id",
          "goodsSn",
          "name",
          "counterPrice",
          "retailPrice",
          "isNew",
          "isHot",
          "isOnSale",
          "listPicUrl",
          "gallery",
          "brief",
          "detail",
          "picUrl",
          "goodsUnit",
          "keywords",
          "categoryId",
          "brandId"
        ];
        excel.export_json_to_excel2(tHeader, this.list, filterVal, "商品信息");
        this.downloadLoading = false;
      });
    }
  }
};
</script>
